<template>
  <van-tabs v-model:active="active" @click-tab="onClickTab" color="red">
    <van-tab title="我的关注">
      <div class="follower-list">
        <div v-for="follower in followers" :key="follower.id" class="follower-item">
          <div class="avatar-container">
            <img :src="follower.avatar" alt="Follower Avatar" class="avatar" />
          </div>
          <div class="info-container">
            <div class="nickname">{{ follower.name }}</div>
            <div class="fan-count">粉丝数: {{ follower.fans_count }}</div>
          </div>
          <button class="unfollow-button" @click="toggleFollow(follower)">
            {{ follower.isFollowing ? '取消关注' : '互相关注' }}
          </button>
        </div>
      </div>
    </van-tab>
    <van-tab title="我的粉丝">
      <div class="fan-list">
        <div v-for="fan in followers" :key="fan.id" class="fan-item">
          <img :src="fan.avatar" class="avatar" alt="粉丝头像" />
          <span class="info">
            <div class="nickname">{{ fan.name }}</div>
            <div class="follower-count">粉丝数: {{ fan.fans_count }}</div>
          </span>
          <van-button class="follow-btn" :disabled="fan.isFollowing" block size="small" @click="toggleFollow(fan)">
            {{ fan.mutual_foll ? '已关注' : '关注' }}
          </van-button>
        </div>
      </div>
    </van-tab>
  </van-tabs>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { showSuccessToast } from 'vant'
import { useRoute } from 'vue-router'
import { request } from '../utils/http.ts'

interface Fruit {
  id: number
  name: string
  avatar: string
  followDate: number
  isFollowing?: boolean
  fans_count?: number
  mutual_foll?: string
}
const active = ref(0) // 控制活动的 tab
const followers = ref<Fruit[]>([])

// 请求关注列表
const getList = async () => {
  const res = await request.get<headlinesResponse<AttentionData>>(headlines.flag() === '关注' ? 'user/followings' : '')
  followers.value = JSON.parse(JSON.stringify(res.data.data))
  // console.log('res==>', res.data.data)
}

// 新增一个函数来获取粉丝列表
const getFollowersList = async () => {
  const res = await request.get<headlinesResponse<AttentionData>>('user/followers')
  if (res && res.data) {
    console.log('粉丝列表==>', res.data.data)
  }
}

onMounted(async () => {
  // const res = await request.get<headlinesResponse<null>>('user/followings?page=1&per_page=20')

  // console.log('res==>', res.data.data)
  // 初始化关注和粉丝tab
  active.value = headlines.flag() === '关注' ? 0 : 1
  useRoute().meta.title = headlines.flag()
  if (headlines.flag() === '关注') {
    getList()
  }
  getFollowersList()
})

// const router = useRouter(); // 获取Vue Router实例

function onClickTab(index: number) {
  active.value = index
  getList()
  // 处理 tab 点击事件
  // if (index === 0) {
  //   router.push("/gz");
  // } else {
  //   router.push("/gz/fs");
  // }
}

function toggleFollow(follower: Fruit) {
  // 模拟关注/取消关注操作
  follower.isFollowing = !follower.isFollowing

  // 显示操作提示
  if (follower.isFollowing) {
    showSuccessToast('关注成功')
  } else {
    showSuccessToast('取消成功')
  }
}

// function toggleFollows(fan: { id: number; name: string; isFollowing: boolean }) {
//   // 切换关注状态
//   fan.isFollowing = !fan.isFollowing

//   // 显示操作提示
//   if (follower.isFollowing) {
//     showSuccessToast('关注成功')
//   } else {
//     showSuccessToast('取消成功')
//   }
// }

// 设置默认值
// console.log("headlines.flag", headlines.flag2());
</script>

<style scoped>
.follower-list {
  display: flex;
  flex-direction: column; /* 如果需要水平排列，请改为 row 并设置适当的宽度 */
  align-items: flex-start; /* 所有项目左对齐 */
  padding: 10px;
  width: 100%; /* 容器宽度 */
}

.follower-item {
  display: flex; /* 使用Flexbox使内部元素（头像、信息、按钮）并排显示 */
  align-items: center; /* 垂直居中 */
  margin-bottom: 20px; /* 每个关注者之间的间隔 */
}

.avatar-container {
  margin-right: 20px; /* 头像与信息的间隔 */
}

.avatar {
  width: 50px; /* 头像宽度 */
  height: 50px; /* 头像高度 */
  border-radius: 50%; /* 圆形头像 */
}

.info-container {
  display: flex;
  flex-direction: column; /* 昵称和粉丝数垂直排列 */
  align-items: flex-start; /* 文本左对齐 */
  justify-content: center; /* 垂直居中（对于本例可能不是必需的，但可以用于调整） */
  flex-grow: 1; /* 占据剩余空间 */
}

.nickname {
  font-size: 18px; /* 昵称字号 */
  margin-bottom: 5px; /* 昵称与粉丝数之间的间隔 */
}

.fan-count {
  font-size: 14px; /* 粉丝数字号 */
  color: #666; /* 灰色文字 */
}

.unfollow-button {
  margin-left: 150px; /* 将取消关注按钮推到最右侧 */
  padding: 8px 16px; /* 按钮内边距（可根据需要调整） */
  cursor: pointer; /* 鼠标悬停时显示指针 */
  border: none; /* 去除边框 */
  background-color: #ebedf0; /* 灰色背景 */
  color: #abadb7; /* 黑色文字 */
  border-radius: 20px; /* 圆角 */
  font-size: 14px; /* 字号 */
  outline: none; /* 去除点击时的轮廓 */
}

.fan-list {
  display: flex;
  flex-direction: column; /* 如果需要垂直堆叠多个粉丝项，否则可以改为 row 并调整子项布局 */
  padding: 10px;
}

.fan-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.avatar {
  width: 50px; /* 或其他合适的尺寸 */
  height: 50px; /* 或其他合适的尺寸 */
  border-radius: 50%; /* 圆形头像 */
  margin-right: 10px; /* 与右侧信息间隔 */
}

.info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nickname {
  font-weight: bold;
}

.follower-count {
  color: #666;
  font-size: 0.875em;
}

.follow-btn {
  margin-left: 150px; /* 将取消关注按钮推到最右侧 */
  padding: 8px 16px; /* 按钮内边距（可根据需要调整） */
  border: none; /* 去除边框 */
  margin-left: auto; /* 使按钮靠右对齐 */
  border-radius: 20px; /* 圆角 */
  font-size: 14px; /* 字号 */
  width: 100px;
  outline: none; /* 去除点击时的轮廓 */
}
</style>

